<template>
  <div class="user-login" :style="'background-image: url('+ bgimage +');background-position:center;' ">
    <img :src="logoUrl" class="user_logo">
    <div class="login-wrap">
      <div class="swiper-container">
        <el-carousel indicator-position="outside"  class="height560">
          <el-carousel-item v-for="(item,index) in banners" :key="index"  class="height560">
            <img :src="item" width="100%" height="100%"/>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="login-container">
        <div class="form_content">
          <div class="login-title">登录</div>
          <el-form ref="form" :model="user" label-width="80px" :label-position="'top'">
            <el-form-item label="邮箱（手机号码）">
              <el-input v-model="user.loginId" maxlength="32"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="user.password" type="password" maxlength="128" :show-password="true" ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button :loading="loading" type="primary" @click.native.prevent="login"  class="wdfull">立即登录</el-button>
            </el-form-item>
            <el-form-item>
              <el-link type="primary" :underline="false" @click="toRegister">没有账号？去注册</el-link>
              <el-link type="info" :underline="false">忘记密码？</el-link>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import logoUrl from '../../../assets/images/user/logo.png'
import bgimage from '../../../assets/images/user/bg.png'
import banner from '../../../assets/images/user/banner/banner1.gif'
export default {
  name: 'UserLogin',
  data () {
    return {
      logoUrl: logoUrl,
      bgimage: bgimage,
      banners: [banner, banner, banner],
      loading: false,
      user: {
        loginId: '',
        password: ''
      }
    }
  },
  methods: {
    login () {
      this.$router.push({name: 'TeamMgt'})
      // this.$refs.form.validate(valid => {
      //   if (valid) {
      //     this.loading = true
      //     // 用户登录
      //     this.$http.post('/user/login', this.user).then(
      //       function (res) {
      //         // this.$router.push({name: ''})
      //         this.loading = false
      //       }
      //     ).catch(() => {
      //       this.loading = false
      //     })
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    },
    toRegister () {
      this.$router.push({name: 'UserRegister'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.user-login {
  height: 100%;
  width: 100%;
}
.user-login .user_logo {
  width: 66px;
  position: absolute;
  left: 46px;
  top: 27px;
}
.user-login .login-wrap{
  width: 1000px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: white;
  border-radius: 8px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 560px;
  overflow: hidden;
  box-shadow: 0 6px 20px 5px rgba(40, 120, 255, 0.1), 0 16px 24px 2px rgba(0, 0, 0, 0.05);
}
.user-login .swiper-container{
  width: 600px;
  float: left;
  height: 100%;
  display: inline-block;
  background: #dddd;
}
.user-login .login-container{
  width: 380px;
  height: 100%;
  float: right;
  position: relative;
}
.user-login .login-container .form_content{
  width: 330px;
  margin: auto auto;
}
  .user-login .login-title{
    font-size: 36px;
    font-weight: bold;
    line-height: 34px;
    color: #396afe;
    margin: 81px 0 60px 0;
  }

</style>
